<template>
  <div class="tag-step">
    <ul class="clearfix">
      <li v-for="(item, index) in step" :key="index" :style="{ width: 100 / step.length + '%' }">
        <div class="step-content" :class="{ active: index <= active }">
          <span class="number">{{ '0' + (index + 1) }}</span>
          <br />
          {{ item.name }}
        </div>
      </li>
    </ul>
    <!-- <el-steps simple :active="active" finish-status="success" process-status="finish">
      <el-step v-for="(item, index) in step" :key="index">
        <template #title>
          <icon-svg :name="item.icon"></icon-svg>{{ item.name }}
        </template>
      </el-step>
    </el-steps> -->
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Number,
      default: 0
    },
    step: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
.tag-step {
  margin: 0 30px;
  color: #fff;
  // .el-step__head {
  //   display: none;
  // }
  // .el-step__title {
  //   svg {
  //     margin-right: 10px;
  //   }
  // }
  // .el-steps--simple {
  //   padding: 13px 2%;
  // }
  li {
    float: left;
  }
  .step-content {
    text-align: center;
    position: relative;
    &.active {
      .number {
        color: #fff;
        background: linear-gradient(to right, #438edd, #54c1e1);
      }
      &:before {
        background: linear-gradient(to right, #438edd, #54c1e1);
      }
    }
  }
  li + li {
    .step-content {
      &:before {
        height: 5px;
        content: '';
        background-color: #9d93d6;
        position: absolute;
        left: -50%;
        top: 12.5px;
        right: 50%;
        z-index: 1;
      }
    }
  }
  .number {
    font-size: 16px;
    display: inline-block;
    width: 35px;
    height: 35px;
    color: #000;
    background-color: #ced2eb;
    text-align: center;
    line-height: 35px;
    margin-bottom: 15px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
  }
}
</style>
